<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>步步街Hybrid布局演示</title>
<link rel="stylesheet" href="../hybrid.css" />
<style type="text/css">
body{font-size:14px;line-height:20px;}
h1{ line-height:2em;margin:0; }
@media (max-width: 768px) {
	.wrapping { width:100%; }
	
	.mn .n1, .nm .n1, .mnn .n1, .nmn .n1, .nnm .n1{width:200px;}

	.mn .filling{ padding-right:200px; }
	.mn .n1 { margin-left:-200px; right:-200px; }

	.nm .filling { padding-left:200px; }
	.nm .n1 { margin-right:-200px; left:-200px; }

	.mnn .filling { padding-right:200px; }
	.mnn .n1 { margin-left:-200px; right:-200px; }
	.mnn .n2 { width:auto; margin-left:-200px; right:-200px; float:none; clear:both; }

	.nmn .filling { padding-left:200px; padding-right:0; }
	.nmn .n1 { margin-right:-200px; left:-200px; }
	.nmn .n2 { width:auto; margin-left:-200px; right:0; float:none; clear:both; }

	.nnm .filling { padding-left:200px; }
	.nnm .n1 { margin-right:-200px; left:-200px; }
	.nnm .n2 { width:auto; margin-right:-200px; left:-200px; float:none; clear:both; }
}

@media (max-width: 480px) {
	.wrapping{ width:auto; }
	.mn .filling, .nm .filling, .mnn .filling, .nmn .filling, .nnm .filling{ padding:0;}
	.mn .ming, .mn .n1, .mn .n2,
	.nm .ming, .nm .n1, .nm .n2,
	.mnn .ming, .mnn .n1, .mnn .n2,
	.nmn .ming, .nmn .n1, .nmn .n2,
	.nnm .ming, .nnm .n1, .nnm .n2 {
		width:auto; float:none; margin:0; left:0; right:0; clear:both;
	}
	.wrapping .w-1, .wrapping .w-1-2, .wrapping .w-1-3, .wrapping .w-2-3, .wrapping .w-1-4, .wrapping .w-3-4,
	.wrapping .w-1-5, .wrapping .w-2-5, .wrapping .w-3-5, .wrapping .w-4-5,
	.wrapping .w-1-6, .wrapping .w-5-6, .wrapping .w-1-8, .wrapping .w-3-8, .wrapping .w-5-8, .wrapping .w-7-8,
	.wrapping .w-1-12, .wrapping .w-5-12, .wrapping .w-7-12, .wrapping .w-11-12,
	.wrapping .w-1-24, .wrapping .w-5-24, .wrapping .w-7-24, .wrapping .w-11-24, .wrapping .w-13-24, .wrapping .w-17-24, .wrapping .w-19-24, .wrapping .w-23-24 {
		width:auto; float:none;
	}
}
div.content {
	display:block;
	border:1px solid #666666;
	overflow:hidden;
	text-align:center;
	background:#F1F1F1;
	font-weight: bold;
	background:#F9F9F4 url(../img/grid_text.png) 1px 0 repeat;
	margin-right:0px;
}
.wrapping {
	width:auto;
	padding:3px 0;
	padding-left:10px;
	padding-right:10px;
}
address *{vertical-align:middle;font-family:Dotum;}
</style>
</head>
<body>
<div class="wrapping"><h1>步步街Hybrid布局演示</h1></div>
<hr />
<div class="wrapping"><h2>步步街Hybrid布局L模式演示</h2></div>
<hr />
<div id="bbody">
  <div class="wrapping m">
    <div class="filling">
      <div class="ming"><div class="content">m-default</div></div>
    </div>
  </div>
  <hr />
  <div class="wrapping mn">
    <div class="filling">
      <div class="ming"><div class="content">m-default</div></div>
      <div class="n1"><div class="content">n-default</div></div>
    </div>
  </div>
  <hr />
  <div class="wrapping nm">
    <div class="filling">
      <div class="ming"><div class="content">m-default</div></div>
      <div class="n1"><div class="content">n-default</div></div>
    </div>
  </div>
  <hr />
  <div class="wrapping mnn">
    <div class="filling">
      <div class="ming"><div class="content">m-default</div></div>
      <div class="n1"><div class="content">n1-default</div></div>
      <div class="n2"><div class="content">n2-default</div></div>
    </div>
  </div>
  <hr />
  <div class="wrapping nmn">
    <div class="filling">
      <div class="ming"><div class="content">m-default</div></div>
      <div class="n1"><div class="content">n1-default</div></div>
      <div class="n2"><div class="content">n2-default</div></div>
    </div>
  </div>
  <hr />
  <div class="wrapping nnm">
    <div class="filling">
      <div class="ming"><div class="content">m-default</div></div>
      <div class="n1"><div class="content">n1-default</div></div>
      <div class="n2"><div class="content">n2-default</div></div>
    </div>
  </div>
</div>
<hr />
<div class="wrapping">
  <div id="colophon">
    <address style="text-align:center;">
      <img src="../img/logo_16px.gif" alt="" />&nbsp;<em>Copyright ©</em> <span><a href="http://www.bubujie.net/" target="_blank">步步街工作室</a> 2008-2012 All Rights Reserved.</span>
    </address>
  </div>
</div>
</body>
</html>
